"use client"
import Image from "next/image";
import { NavbarItem } from "./NavbarItem";
import { BsBell, BsChevronDown, BsSearch } from "react-icons/bs";
import { MobileMenu } from "./MobileMenu";
import { useCallback, useEffect, useState } from "react";
import { AccountMenu } from "./AccountMenu";
import { useRouter } from "next/navigation";
const TOP_OFFSET = 66
export const Navbar = () => {
    const [showMobileMenu, setShowMobileMenu] = useState(false)
    const [showAccountMenu, setShowAccountMenu] = useState(false)
    const [showBackground, setShowBackground] = useState(false)
    const router = useRouter()
    const toggleMobileMenu = useCallback(() => {
        setShowMobileMenu((current) => !current)
    }, [])
    const toggleAccountMenu = useCallback(() => {
        setShowAccountMenu((current) => !current)
    }, [])
    const hideMenu = () => {
        showAccountMenu && setShowAccountMenu(false)
        showMobileMenu && setShowMobileMenu(false)
    }

    useEffect(() => {
        const handleScroll = () => {
            if (window.scrollY > TOP_OFFSET) {
                setShowBackground(true)
            } else {
                setShowBackground(false)
            }
        }
        window.addEventListener('scroll', handleScroll)
        return () => {
            window.removeEventListener('scroll', handleScroll)
        }
    }, [])

    const toProfile = () => router.push("/profile")

    return (<div className=" w-full fixed top-0 left-0 right-0 z-10">
        <div onClick={hideMenu} className={`px-4 md:px-16 py-6 flex flex-row items-center transition duration-1000  bg-opacity-90 ${showBackground && 'bg-zinc-900'}`}>
            <div className=" w-[10%]">
                <Image
                    src={'netflix_logo.svg'}
                    alt="Logo"
                    className="w-auto h-auto"
                    width={120}
                    height={120}
                    priority
                />
            </div>
            <div className="flex-row ml-8 gap-7 hidden lg:flex">
                <NavbarItem label="Home" />
                <NavbarItem label="Series" />
                <NavbarItem label="Films" />
                <NavbarItem label="New & Popular" />
                <NavbarItem label="My List" />
                <NavbarItem label="Browse by language" />
            </div>
            <div onClick={toggleMobileMenu} className=" select-none lg:hidden flex flex-row items-center gap-2 ml-8 cursor-pointer relative">
                <p className="text-white text-sm">Browse</p>
                <BsChevronDown className={`${showMobileMenu ? 'rotate-180' : 'rotate-0'}`} />
                <MobileMenu visible={showMobileMenu} />
            </div>
            <div className="flex flex-row ml-auto gap-7 items-center ">
                <div className="text-gray-200 hover:text-gray-300 cursor-pointer transition">
                    <BsSearch />
                </div>
                <div className="text-gray-200 hover:text-gray-300 cursor-pointer transition">
                    <BsBell />
                </div>
                <div onClick={toggleAccountMenu} className="text-gray-200 hover:text-gray-300 cursor-pointer transition relative flex flex-row items-center  gap-2">
                    <div onClick={toProfile} className="w-6 h-6 lg:w-10 lg:h-10 rounded-md overflow-hidden">
                        <Image src={"/avatar.png"} alt="profile" width={44} height={44} priority />
                    </div>
                    <BsChevronDown className={`text-white translate ${showAccountMenu ? 'rotate-180' : 'rotate-0'}`} />
                    <AccountMenu visible={showAccountMenu} />
                </div>
            </div>
        </div>
    </div>)
}

